import React from 'react'
import { Search, Tabs, Swiper, Image, Grid, } from 'react-vant';
import { useNavigate } from "react-router-dom"
function Item(props: any) {
    console.log(props.data);
    const navigate = useNavigate()
    return (
        <div>
            {
                props.data.map((item: any, index: any) => {
                    return <div className='aa' onClick={() => navigate("/detail/" + item.id, { state: item })}>

                        <div className='box'>
                            <dl>
                                <dt> <Image width="100px" height="100px" src={item.img} /></dt>
                                <dd><p>{item.name}</p>
                                <p>{item.title}</p></dd>

                            </dl>
                            
                        </div>
                        <button>开始玩</button>
                    </div>
                })
            }
        </div>

    )
}

export default Item